<template>
  <div class="app-container">

    <u-page title="销售对账">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">

          <el-form-item label="部门" prop="dept">
            <el-input v-model="listQuery.dept" placeholder="部门" clearable />
          </el-form-item>
          <el-form-item label="商户" prop="merchantName">
            <el-input v-model="listQuery.merchantName" placeholder="商户名称" clearable />
          </el-form-item>
          <el-form-item label="对账日期">
            <el-date-picker
              v-model="listQuery.salesDate"
              type="date"
              placeholder="对账日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择状态" class="status" clearable>
              <el-option value="" label="全部" />
              <el-option :value="0" label="未对账" />
              <el-option :value="1" label="已完成" />
              <el-option :value="2" label="存在差异" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
<!--        <template v-slot:right>-->
<!--          <el-table-column label="操作" align="center" fixed="right">-->
<!--            <template slot-scope="{ row }">-->
<!--              <el-button type="text" @click="handleView(row)">查看详细</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </template>-->
      </u-table>
    </u-page>

<!--    <detail v-model="dialogDetailVisible" :data="detailQuery" />-->

  </div>
</template>

<script>

export default {
  data() {
    return {
      api: this.$u.api.PluginsGuideSalesbill,
      // 表格
      columns: [
        {
          prop: 'dept',
          label: '部门'
        },
        {
          prop: 'merchantName',
          label: '商户'
        },
        {
          prop: 'enterpriseName',
          label: '公司'
        },
        {
          prop: 'enterpriseNo',
          label: '公司编码'
        },
        {
          prop: 'merchantNo',
          label: '商户编码'
        },

        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const { status } = params.row
            if (status === 0) {
              return h('el-tag', { props: { type: 'info' }}, '未对账')
            } else if (status === 1) {
              return h('el-tag', { props: { type: '' }}, '已完成')
            } else if (status === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '存在差异')
            }
          }
        },
        {
          prop: 'jobNo',
          label: '操作人'
        },
        {
          prop: 'salesDate',
          label: '对账日期'
        },
        {
          prop: 'createTime',
          label: '操作时间'
        }

      ],

      list: [],
      listLoading: false,
      listOptions: {
        stripe: true // boolean 斑马纹
      },
      merchantQuery: {},
      inputDateTimeRange: [],
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        yearMonth: ''
      },
      dialogStatus: '',
      dataForm: {},
      newForm: {
        disabled: true
      },
      // 删除选中数据
      selectData: [],
      active: 'first',

      // 查看详细
      dialogDetailVisible: false,
      detailQuery: {}
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    handleView(row) {
      this.detailQuery = row
      this.dialogDetailVisible = true
    },
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'status', item.status === 0 ? '未对账' : item.status === 1 ? '已完成' : item.status === 2 ? '存在差异' : '')
      })
      // 表头&表数据
      const tHeader = ['部门', '商户', '公司', '公司编码', '商户编码', '状态', '对账日期', '操作人']
      const filterVal = ['dept', 'merchantName', 'enterpriseName', 'enterpriseNo', 'merchantNo', 'status', 'salesDate', 'jobNo']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('销售账单', tHeader, data)
    }
  }
}

</script>

<style scoped>

</style>
